<script setup lang="ts">
import { ref } from 'vue'
// 1.定义基本类型
let num = ref(10)
// 代码中如果要修改数据，需要通过.value
const changeNum = () => {
  num.value++
}
// 2.定义复杂类型
const foods = ref(['xi', 'lan', 'hua'])
const changeFoods = () => {
  foods.value.push('jijiang')
}
// ref 好像比reactive强大
</script>

<!-- 结构 -->
<template>
  <!-- ref 定义的数据在Ui界面中使用或修改不需要写.value -->
  <div>
    <h1 @click="changeNum">num:{{ num }}</h1>
    <h1 @click="changeFoods">foods:{{ foods }}</h1>
    <button @click="foods.unshift('花菜')">foods:{{ foods }}</button>
  </div>
</template>

<!-- 样式 -->
<style scoped>
</style>